<template>
    <div class="container">

        <view-box ref="viewBox">

            <flexbox orient="vertical">

                <flexbox-item>
                    <swiper :list="swiperList"
                            auto
                            :show-desc-mask="false"
                            style="margin:0 auto;"
                            height="250px">
                    </swiper>
                </flexbox-item>

                <flexbox-item>
                    <div class="gird-box">
                        <div class="gird-item" @click="go('/Zcscqj/index')">
                            <div class="icon">
                                <i class="iconfont icon-icon-test"></i>
                            </div>
                            <div class="title">租车市场前景</div>
                        </div>
                        <div class="gird-item" @click="go('/Pthppjs/index')">
                            <div class="icon">
                                <i class="iconfont icon-global"></i>
                            </div>
                            <div class="title">品牌和平台介绍</div>
                        </div>
                    </div>
                    <div class="gird-box">
                        <div class="gird-item" @click="go('/Hxtzld/index')">
                            <div class="icon">
                                <i class="iconfont icon-meiyuan"></i>
                            </div>
                            <div class="title">核心投资亮点</div>
                        </div>
                        <div class="gird-item" @click="go('/Jm5dys/index')">
                            <div class="icon">
                                <i class="iconfont icon-brand"></i>
                            </div>
                            <div class="title">加盟5大优势</div>
                        </div>
                    </div>
                    <div class="gird-box">
                        <div class="gird-item" @click="go('/Qc8dzc/index')">
                            <div class="icon">
                                <i class="iconfont icon-support3"></i>
                            </div>
                            <div class="title">全程8大支持</div>
                        </div>
                        <div class="gird-item" @click="go('/Jmsygs/index')">
                            <div class="icon">
                                <i class="iconfont icon-notepad2"></i>
                            </div>
                            <div class="title">加盟收益概述</div>
                        </div>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="jmsq">
                        <span>加盟申请</span>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="form">
                        <x-input title="姓名" name="realName" is-type="china-name"></x-input>
                        <x-input title="手机" name="mobile" is-type="china-mobile"></x-input>
                        <x-input title="地址" name="address"></x-input>
                        <x-input title="邮箱" name="email" is-type="email"></x-input>
                        <x-input title="留言" name="message"></x-input>
                    </div>
                </flexbox-item>

                <flexbox-item>
                    <div class="submit">
                        <x-button :gradients="['#eb5d11', '#eb5d11']">提交申请</x-button>
                    </div>
                </flexbox-item>

            </flexbox>
        </view-box>

    </div>
</template>

<script>
    import { ViewBox, Scroller, Swiper, Flexbox, FlexboxItem, Grid, GridItem, XInput, XButton } from 'vux'
    import swiper1 from '@/assets/swiper/swiper1.png'
    import swiper2 from '@/assets/swiper/swiper2.png'
    import swiper3 from '@/assets/swiper/swiper3.png'

    export default {
        name: 'Zsjm',
        components: {
            ViewBox,
            Scroller,
            Swiper,
            Flexbox,
            FlexboxItem,
            Grid,
            GridItem,
            XInput,
            XButton
        },
        data() {
            return {
                swiperList: [
                    {url: 'javascript:', img: swiper1},
                    {url: 'javascript:', img: swiper2},
                    {url: 'javascript:', img: swiper3}
                ],
            }
        },
        methods: {
            go(link) {
                this.$router.push(link)
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>

    .gird-box{
        display: flex;
        flex-direction: row;
        justify-content: center;
        text-align: center;
        color:#fff;
        .gird-item{
            width: 180px;
            height: 100px;
            align-items: center;
            margin: 10px;
            background: #eb5d11;
            .icon{
                width: 100%;
                height: 60px;
                i{
                    display: inline-block;
                    font-size: 43px;
                }
            }
            .title{
                font-size: 20px;
                font-weight: bold;
            }
        }
    }

    .jmsq{
        text-align: center;
        padding-left: 20px ;
        padding-right: 20px ;
        span{
            display: inline-block;
            line-height: 40px;
            font-size: 22px;
            font-weight: bold;
            color: #eb5d11;
            border: 1px solid #eb5d11;
            width: 100%;
            border-radius: 5px;
            box-shadow: 0px 0px 3px 3px #ffe4c6;
        }
    }
    .form {
        text-align: center;
        padding-left: 20px ;
        padding-right: 20px ;
        .weui-cell {
            padding-left: 0;

        }
    }
    .submit{
        text-align: center;
        padding-left: 20px ;
        padding-right: 20px ;
    }

</style>
